
import React, { useState } from 'react'
import { producestore } from "../stores/Produce"
import { useSnapshot } from "valtio"
import Htables from './Htables'
import type { TableColumnsType } from 'antd';
interface DataType {
    ProductName: string,
    standard: string,
    propery: string,
    originalprice: number,
    realprice: number,
    count: number,
    Lunchboxfee: number,
    price: number,
}
interface StatusList {
    time: string,
    status: string
}
export default function Show() {
    const store = useSnapshot(producestore)
    let number = 1
    const columns: TableColumnsType<DataType> = [
        {
            title: "序号",
            dataIndex: 'key',
            key: "1",
            render: (text: any, record: DataType) => (
                <span> {number++} </span>
            ),
        },
        {
            title: '商品名称',
            dataIndex: 'ProductName',
            key: "2"
        },
        {
            title: '规格',
            dataIndex: 'standard',
            key: "3"
        },
        {
            title: '属性',
            dataIndex: 'OrderID',
            key: "4"
        },
        {
            title: '原价',
            dataIndex: 'originalprice',
            key: "5"
        },
        {
            title: '实价',
            dataIndex: 'realprice',
            key: "6"
        },
        {
            title: '份数',
            dataIndex: 'realprice',
            key: "7"
        },
        {
            title: '餐盒费',
            dataIndex: 'Lunchboxfee',
            key: "8"
        },
        {
            title: '金额',
            dataIndex: 'price',
            key: "9"
        },
    ];
    let num = 1
    const columnsone: TableColumnsType<StatusList> = [
        {
            title: "序号",
            dataIndex: 'key',
            key: "1",
            render: (text: any, record: DataType) => (
                <span> {num++} </span>
            ),
        },
        {
            title: '商品名称',
            dataIndex: 'time',
            key: "2"
        },
        {
            title: '规格',
            dataIndex: 'status',
            key: "3"
        },

    ];
    const pagination = false
    const data = useState(store.Datalist)
    return (
        <div>
            <div className='w-[100%] border-b-indigo-500'>
                基本信息
            </div>
            <div className='flex w-[100%] justify-evenly'>
                <p>来源:{store.Datalist.origin}</p>
                <p>桌号:{store.Datalist.TableModel}</p>
                <p>订单号:{store.Datalist.OrderID}</p>
                <p>客户姓名:{store.Datalist.seller}</p>
            </div>
            <div className='flex w-[100%] justify-evenly'>
                <p>手机号:{store.Datalist.phone}</p>
                <p>虚拟手机号:{store.Datalist.xuphone}</p>
                <p>下单时间:{store.Datalist.DealTime}</p>
            </div>
            <div>
                <p>送餐地址：{store.Datalist.ShippingAddress}</p>
            </div>
            <div>
                <p>订单备注：{store.Datalist.remark}</p>
            </div>
            <div className='flex w-[100%] justify-between'>
                <p>订单明细</p>
                <p>订单合计金额:<span className='color-red'>{store.Datalist.price}</span></p>
            </div>
            <Htables columns={columns} data={store.Datalist.OrderDetails} pagination={pagination}  /* dataSource={store.Datalist.data} */></Htables>
            <p>费用明细</p>
            <div className='flex w-[100%] justify-evenly'>
                <p>支付配送费:{store.Datalist.delivery}</p>
                <p>餐盒费:{store.Datalist.vip}</p>
                <p>会员减配送费:{store.Datalist.vip}</p>
                <p>订单活动总额:-{store.Datalist.numsum}</p>
            </div>
            <div className='flex w-[100%] justify-between'>
                <p>订单明细</p>
                <p>订单合计金额:<span className='color-red'>{store.Datalist.price}</span></p>
            </div>
            <Htables style={{width:"50%"}}  columns={columnsone} data={store.Datalist.OrderStatus} pagination={pagination}  /* dataSource={store.Datalist.data} */></Htables>
        </div>
    )
}
